<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>种养殖一体化智慧管理中心</title>
<meta
	content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
	name="viewport">
<link rel="stylesheet"	href="${request.contextPath}/statics/css/bootstrap.min.css">
<link rel="stylesheet"	href="${request.contextPath}/statics/css/font-awesome.min.css">
<link rel="stylesheet"	href="${request.contextPath}/statics/css/AdminLTE.min.css">
<link rel="stylesheet"	href="${request.contextPath}/statics/css/all-skins.min.css">
<script src="${request.contextPath}/statics/libs/jquery.min.js"></script>
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=3.0&ak=r8aXwsks3aVHaFuQ0wxUEfwBLMCLuZH8"></script>
<style>
::-webkit-scrollbar-track {
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	-webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
}

::-webkit-scrollbar {
	width: 16px;
	height: 16px;
}

::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb {
	border-radius: 999px;
	border: 5px solid transparent;
}

::-webkit-scrollbar-track {
	box-shadow: 1px 1px 5px rgba(0, 0, 0, .2) inset;
}

::-webkit-scrollbar-thumb {
	min-height: 20px;
	background-clip: content-box;
	box-shadow: 0 0 0 5px rgba(0, 0, 0, .2) inset;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

html {
	overflow-x: hidden;
}
</style>
</head>
<body>
	<section class="content">
		<div class="rows" style="margin-bottom: 1%; overflow: hidden;">
			<div style="float: left; width: 100%;">
				<div style="border: 1px solid #e6e6e6; background-color: #fff;">
					<div class="panel panel-default">
						<div class="panel-heading">
							<i class="fa fa-area-chart fa-lg" style="padding-right: 5px;"></i>
							<span class="info"></span>
						</div>
						<div class="panel-body" style="padding-bottom: 0px;">
							<div id="allmap" style="width: 100%;background:#0aaf19"></div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
	<script type="text/javascript">

        function screenInfo(){
            if(window.innerHeight !== undefined){
                return {
                    "width": window.innerWidth,
                    "height": window.innerHeight
                }
            }else if(document.compatMode === "CSS1Compat"){
                return {
                    "width": document.documentElement.clientWidth,
                    "height": document.documentElement.clientHeight
                }
            }else{
                return {
                    "width": document.body.clientWidth,
                    "height": document.body.clientHeight
                }
            }
        }

		var map, opts, area1 = 0,area2 = 0,area3 = 0,area4 = 0, i;
		$(function() {
            var infos = screenInfo();
            $('#allmap').css({"height":(infos.height-60)+"px"},{"min-height":(infos.height-60)+"px"});
			map = new BMap.Map("allmap", {
				mapType : BMAP_HYBRID_MAP
			});
			map.centerAndZoom(new BMap.Point(106.6367, 26.6527), 9);
			map.addControl(new BMap.MapTypeControl({
				mapTypes : [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ]
			}));
			map.setCurrentCity("贵阳"); // 设置地图显示的城市 此项是必须设置的
			map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
			opts = {
				width : 360,
				height : 210,
				title : "<span style='width:100%;text-align:center;color:#0aaf19;display:inline-block;font-weight:bold;'>基地信息</span>",
				enableMessage : true
			};
			$.ajax({
				url : "/farm/getAllFarm",
				type : "get",
                dataType : "json",
				async : false,
				success : function(data) {
				    if(data.code == 0){
				        data = data.data;
                        var markers = [];
				        for (i = 0; i < data.length; i++) {
                            var marker = new BMap.Marker(new BMap.Point(data[i].longs,data[i].lat));
                            markers.push(marker);
                            map.addOverlay(marker);
                        }
				        for (i = 0; i < data.length; i++) {

                            var html = '<hr style="height:1px;color:#999;margin-top:6px;" />';
                            html += '<table width="360" border="0" style="border-collapse:separate; border-spacing:0px 4px;margin-top:-10px;">';
                            html += '<tr>';
                            html += '<td style="width:70px;" align="right">基地名称：</td>';
                            html += '<td><span title="'+data[i].name+'">'+data[i].name+'</span></td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">基地面积：</td>';
                            html += '<td>'+data[i].area+' 亩</td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">地址：</td>';
                            html += '<td><span title="'+data[i].address+'">'+data[i].address+'</span></td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">联系人：</td>';
                            html += '<td>'+data[i].linkMan+'</td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">电话：</td>';
                            html += '<td>'+data[i].linkTel+'</td>';
                            html += '</tr>';
                            html += '</table>';
                            addClickHandler(html,marker);
                            if(data[i].speciesId==42){//种植
                                area1 += parseInt(data[i].area);
                            }
                            if(data[i].speciesId==43){//养殖
                                area2 += parseInt(data[i].area);
                            }
                            if(data[i].speciesId==44){//畜牧
                                area3 += parseInt(data[i].area);
                            }
                            if(data[i].speciesId==45){//水产
                                area4 += parseInt(data[i].area);
                            }

                            (function(){
                                var index = i;
                                markers[i].addEventListener('click', function(e){
                                    console.log(e);
                                    this.openInfoWindow(new BMap.InfoWindow(html));
                                });
                            })();
                        }


                        /*for (i = 0; i < data.length; i++) {
                            var marker = new BMap.Marker(new BMap.Point(data[i].longs,data[i].lat)); // 创建标注
                            var html = '<hr style="height:1px;color:#999;margin-top:6px;" />';
                            html += '<table width="360" border="0" style="border-collapse:separate; border-spacing:0px 4px;margin-top:-10px;">';
                            html += '<tr>';
                            html += '<td style="width:70px;" align="right">基地名称：</td>';
                            html += '<td><span title="'+data[i].name+'">'+data[i].name+'</span></td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">基地面积：</td>';
                            html += '<td>'+data[i].area+' 亩</td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">地址：</td>';
                            html += '<td><span title="'+data[i].address+'">'+data[i].address+'</span></td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">联系人：</td>';
                            html += '<td>'+data[i].linkMan+'</td>';
                            html += '</tr>';
                            html += '<tr>';
                            html += '<td align="right">电话：</td>';
                            html += '<td>'+data[i].linkTel+'</td>';
                            html += '</tr>';
                            html += '</table>';
                            map.addOverlay(marker); // 将标注添加到地图中
                            addClickHandler(html,marker);
                            if(data[i].speciesId==42){//种植
                                area1 += parseInt(data[i].area);
                            }
                            if(data[i].speciesId==43){//养殖
                                area2 += parseInt(data[i].area);
                            }
                            if(data[i].speciesId==44){//畜牧
                                area3 += parseInt(data[i].area);
                            }
                            if(data[i].speciesId==45){//水产
                                area4 += parseInt(data[i].area);
                            }
                        }*/
                        $('.info').empty().append('全省基地总个数：' + i + '（个），其中种植面积为：' + area1 + '（亩），养殖数量为：' + area2 + '（头、羽、个、只），畜牧数量为：'+ area3 + '（头、个），水产数量为'+ area4 + '（吨）');
                    }else{
                        $('.info').empty().append('全省基地总个数：' + 0 + '（个），其中种植面积为：' + 0 + '（亩），养殖数量为：' + 0 + '（头、羽、个、只），畜牧数量为：'+ 0 + '（头、个），水产数量为'+ 0 + '（吨）');
                    }
				}
			});
		});

		function addClickHandler(content, marker) {
			marker.addEventListener("click", function(e) {
				openInfo(content, e)
			});
		}
		function openInfo(content, e) {
			var p = e.target;
			var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
			var infoWindow = new BMap.InfoWindow(content, opts); // 创建信息窗口对象 
			map.openInfoWindow(infoWindow, point); //开启信息窗口
		}
	</script>
</body>
</html>